<template>
  <div class="main">
   <div class="head">
     <el-carousel interval="2000" arrow="always" height="400px">
       <el-carousel-item v-for="img in imgList" :key="img.id">
         <img style="max-width: 100%;height: auto;border-radius: 8px;" :src="img.url" alt="未加载" />
       </el-carousel-item>
     </el-carousel>
   </div>
    <div class="body">
<!--      左侧信息列表-->
      <div class="left">
        <div class="box">
          <!-- 创建一个带有超链接的标题 -->
          <h2 class="title">
              消息通知
          </h2>
          <h4 class="title" @click="loadingMessage" style="cursor: pointer;color: #03a9f4">
            全部消息
          </h4>
          <div class="img">
              <img src="https://www.tcu.edu.cn/images/xyfg222.jpg" style="width:360px;" alt="未加载">
              <h3 class="imgTitle">
                <div @click="changeCurrentMessage(0)">{{this.suggestMessageList[0].title}}</div>
              </h3>
          </div>
          <div class="messagesList">
            <ul>
              <li>
                <div class="item" @click="changeCurrentMessage(1)">{{this.suggestMessageList[1].title}}</div>
              </li>
              <li>
                <div class="item" @click="changeCurrentMessage(2)">{{this.suggestMessageList[2].title}}</div>
              </li>
              <li>
                <div class="item" @click="changeCurrentMessage(3)">{{this.suggestMessageList[3].title}}</div>
              </li>
              <li>
                <div class="item" @click="changeCurrentMessage(4)">{{this.suggestMessageList[4].title}}</div>
              </li>
            </ul>
          </div>
        </div>
      </div>
<!--      右侧信息详情列表-->
      <div class="right">
        <h1>{{this.currentMessage.title}}</h1>
        <!-- 修改字体颜色,插入链接,加粗 -->
        <div class="gray">发布时间：{{this.currentMessage.releaseTime}}</div>
        <!-- <hr>是个横线,开发中不使用,了解一下 -->
        <hr>
        <p>{{this.currentMessage.content}}</p>
        <!-- 插入图片 -->
        <!-- 想让图片水平居中,则让它的父亲p标签添加水平居中的代码.就是在图片前添加p标签,然后给p标签添加代码 -->
        <p class="pic"><img :src="this.currentMessage.imgUrl" alt="未加载" style="height: 200px"></p>
        <p class="footer">(发布人:{{this.currentMessage.publisherName}})</p>
      </div>
    </div>
    <div class="foot">
<!--      全部信息弹窗-->
      <el-dialog
          v-model="messageDialogVisible"
          title="全部信息"
          width="60%"
      >
        <el-table :data="allMessageList" style="width: 100%">
          <el-table-column prop="releaseTime" label="发布时间" width="200" />
          <el-table-column prop="title" label="标题" width="400" />
          <el-table-column prop="publisherName" label="发布人" width="150"/>
          <el-table-column label="查看详情" width="100" >
            <template #default="scope" style="margin-left: 10px">
              <el-button type="primary" :icon="Reading" circle @click="readingMessageDetails(scope.row)"/>
            </template>
          </el-table-column>
        </el-table>
        <div style="display: flex;justify-content: center">
          <el-pagination
              :page-size="5"
              layout="prev, pager, next"
              :total="total"
              @current-change="loadingMessage"
              v-model:current-page="currentPage"
          />
        </div>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="messageDialogVisible = false">关闭</el-button>
      </span>
        </template>
      </el-dialog>
<!--      全部信息中详情信息弹窗-->
      <el-dialog
          v-model="messageDetailsDialogVisible"
          title="详情信息"
          width="60%"
      >
        <div class="messageDetails">
          <h1>{{this.currentDialogMessage.title}}</h1>
          <!-- 修改字体颜色,插入链接,加粗 -->
          <div class="gray">发布时间：{{this.currentDialogMessage.releaseTime}}</div>
          <!-- <hr>是个横线,开发中不使用,了解一下 -->
          <hr>
          <p>{{this.currentDialogMessage.content}}</p>
          <!-- 插入图片 -->
          <!-- 想让图片水平居中,则让它的父亲p标签添加水平居中的代码.就是在图片前添加p标签,然后给p标签添加代码 -->
          <p class="pic"><img :src="this.currentDialogMessage.imgUrl" alt="未加载" style="height: 200px"></p>
          <p class="footer">(发布人:{{this.currentDialogMessage.publisherName}})</p>
        </div>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="messageDetailsDialogVisible = false">关闭</el-button>
      </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {loadingImgList} from "../../api/image";
import { getFiveMessagesList, getMessagesListByPageNumberAndPageSize,countTotal} from "../../api/message";
import {Reading} from "@element-plus/icons-vue";
export default {
  name: "StudentNotice",
  data(){
    return {
      Reading,
      messageDialogVisible:false,//全部信息弹窗
      messageDetailsDialogVisible:false,//全部信息中详情信息按钮弹窗
      imgList:[
        {
          url:"https://www.tcu.edu.cn/images/xyfg-pic2.jpg"
        }
      ],
      activeNames:"1",
      //推荐栏内的新闻列表
      allMessageList:[
        {
          id:"",
          title:"",
          publisherName:'',
          imgUrl: '',
          releaseTime:"",
          content:'',
        }
      ],
      suggestMessageList:[
        {
          title: ''
        },
        {
          title: ''
        },
        {
          title: ''
        },
        {
          title: ''
        },
        {
          title: ''
        }
      ],
      //当前新闻栏内的信息
      currentMessage:{
        id:"",
        publisherName:'',
        title:"",
        imgUrl: '',
        releaseTime:"",
        content:'',
      },
      //当前弹窗内中选中的信息详情
      currentDialogMessage:{
        id:"",
        publisherName:'',
        title:"",
        imgUrl: '',
        releaseTime:"",
        content:'',
      },
      //弹窗全部信息分页
      currentPage:1,
      total:0,
    }
  },
  methods: {
    //加载轮播图图片信息
    loadImages(){
      loadingImgList().then(res =>{
        this.imgList = res.data;
      });
    },
    //加载推荐消息
    loadFiveMessagesList(){
      getFiveMessagesList().then(res => {
        this.suggestMessageList = res.data;
        this.currentMessage = this.suggestMessageList[0];
      })
    },
    //点击全部信息弹出弹框并加载分页信息
    loadingMessage(){
      //所有信息总数
      countTotal().then(res => {
        this.total = res.data;
      });
      getMessagesListByPageNumberAndPageSize(this.currentPage,5).then(res => {this.allMessageList = res.data});
      this.messageDialogVisible = true;
    },
    //改变当前选中信息
    changeCurrentMessage(num){
      this.currentMessage = this.suggestMessageList[num];
    },
    //全部信息中详情按钮
    readingMessageDetails(message)
    {
      this.currentDialogMessage = message;
      this.messageDetailsDialogVisible = true;
    },
  },
  mounted() {
    this.loadImages();
    this.loadFiveMessagesList();
  },
  created() {
  }
}
</script>

<style scoped>
.main {
  display: flex;
  flex-direction: column;
}
.head {
  justify-content: center;
  padding-top: 20px;
  margin-right: 120px;
  margin-left: 120px;
}
.main {
  background: url(https://www.tcu.edu.cn/dfiles/11260/d-img/list-main-bg.png) no-repeat center bottom;
  text-align: justify;
  display: flex;
}
.body {
  display: flex;
  margin-left: 120px;
  margin-top: 20px;
}
/*左侧新闻栏样式*/
/* 设置容器的样式 */
.box{
  /* 设置宽和高 */
  width:360px;
  height:450px;
  margin-top: 20px;
  background-color:white;
  /* 设置上边框 */
  border-top:1px solid #ddd;
}
/* 设置标题样式 */
.title{
  height:30px;
  line-height:30px;
  /* 为了让上边框和文字一样宽,用display将h2转换为行内块元素*/
  display:inline-block;
  margin-top:10px;
  margin-left: 10px;
}
.title .item{
  display: flex;
  color:#333;
  /* 字体加粗 */
  font-weight:bold;
}
/* 设置图片容器的高度，避免下边的文字上移 */
.img{
  height:358px;
}
/* 设置图片上的文字的样式 */
.imgTitle{
  color: rgb(255, 255, 255);
  margin-top:-50px;
  font-weight:bold;
  font-size: 30px;
  padding-left:30px;
}
.img .imgTitle .item{
  color:#fff;
}
/* 设置新闻列表 */
.messagesList{
  margin-top:-130px;
  list-style: square;
}
/* 设置li */
.messagesList li{
  margin-bottom:14px;
}
/* 通过before设置文字前边的列表符号，而不是通过span */
/* 设置超链接的样式 */
.messagesList li .item{
  font-size:16px;
  color:#666;
}
.imgTitle:hover{
  color: #90c1ee;
}
.messagesList li .item:hover{
  color:red;
}
.left {
  display: flex;
}
.right {
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 120px;
  background-color: white;
  width: 100%;
  max-height: 500px;
  font: 16px/28px 'Microsoft Yahei'
}
h1 {
  /* 文字不加粗 */
  font-weight: 400;
  /* 让h1里面的文字水平居中对齐 */
  text-align: center;
}
.gray {
  color: #888897;
  font-size: 12px;
  text-align: center;
}

/* 首行缩进两个字的距离 */
p {
  text-indent: 2em;
}
/* 想让图片水平居中,则让它的父亲p标签添加水平居中的代码 */

.pic {
  text-align: center;
  width: 80%;
}
.footer {
  display: flex;
  font-size: 12px;
  color: #888;
  margin-right: 20px;
  justify-content: flex-end;
}

</style>